import ProList from '@ant-design/pro-list';
import { Button, Form, Input } from 'antd';
import { useEffect, useState } from 'react';

const data: any[] = [
  {
    id: '1',
    name: '1',
  },
];

export default () => {
  const [dataSource, setDataSource] = useState<any[]>();
  const [form] = Form.useForm();

  useEffect(() => {
    getData();
  }, []);

  const getData = async (values?: any) => {
    if (values) {
      setDataSource([...data, values]);
    } else {
      setDataSource(data);
    }
  };

  const handleOk = async () => {
    const values = await form.validateFields();
    getData(values);
  };

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <div
        style={{
          width: '100%',
          height: '100%',
          marginRight: '8px',
          background: '#fff',
        }}
      >
        <ProList
          defaultSize="small"
          toolBarRender={() => {
            return [
              <Form layout="inline" form={form}>
                <Form.Item name="id" label="id">
                  <Input />
                </Form.Item>
                <Form.Item name="name" label="名称">
                  <Input />
                </Form.Item>
              </Form>,
              <Button key="add" type="primary" onClick={handleOk}>
                新建科目
              </Button>,
            ];
          }}
          rowKey="id"
          headerTitle="录入科目"
          dataSource={dataSource}
          showActions="always"
          metas={{
            title: {
              dataIndex: 'name',
            },
          }}
        />
      </div>
    </div>
  );
};
